<template>
  <view class="container">
    <block v-for="(item, index) in list" :key="index">
      <view>
        <view class="title">{{ item.title }}</view>
        <view class="list">
          <view class="item" :class="{ 'item-active': isActive(item.key, item2.id) }" v-for="item2 in item.list"
            :key="item2.id" @click="changeCheck(item, item2.id)">{{ item2.title }}</view>
        </view>
      </view>
    </block>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    cate: String,
    alcohol_id: {
      type: Array,
      default() {
        return [];
      },
    },
    aroma_id: {
      type: Array,
      default() {
        return [];
      },
    },
    volume_id: {
      type: Array,
      default() {
        return [];
      },
    },
    pack_id: {
      type: Array,
      default() {
        return [];
      },
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    isActive(key, id) {
      return (
        this[key].includes(id) || false
      );
    },
    changeCheck(item, id) {
      const ids = this[item.key] || [];
      // 如果当前选中的ID已经在数组中，则清空选择
      if (ids.includes(id)) {
        this.$emit("changeCheck", {
          key: item.key,
          ids: [],
        });
      } else {
        // 单选模式：直接将新ID设置为唯一选中项
        this.$emit("changeCheck", {
          key: item.key,
          ids: [id]
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 32rpx;
  padding-top: 12rpx;
  max-height: 600rpx;
  overflow-y: auto;

  .title {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
    // margin-top: 12rpx;
  }

  .list {
    display: flex;
    flex-wrap: wrap;

    .item {
      height: 60rpx;
      padding: 0 9rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      background: #f7f8fa;
      border-radius: 8rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }

    .item-active {
      background: rgba(197, 38, 29, 0.1);
      color: $theme-color !important;
    }
  }
}
</style>